import React, {PropTypes} from 'react'
import {Button, Icon, Upload} from 'antd'
import {openNotice, config} from '../../utils'
import {word2, excel2, ppt2, pdf2} from '../../assets/base64'
const Dragger = Upload.Dragger;

const FileUpload = React.createClass({
  getInitialState(){
    return {
      list: []
    };
  },
  onDeleteDone(file, fileList){
    this.props.getList(fileList, this.props.index||null, this.props.fileBelong||null);
  },//删除成功的回调方法

  onUploadDone(file, fileList){
    if(this.props.countLimit && (fileList.length > this.props.countLimit)){
      fileList.splice(fileList.length-1, 1);
      openNotice('error', '上传错误', `仅限上传 ${this.props.countLimit} 份`);
    }
    var t = '',//配置非图片文件的缩略图
      uidTmp = file.uid,
      str = file.name;
    if(str.match(/\.doc|\.docx/i)){
      t = word2;
    }else if(str.match(/\.ppt|\.pptx/i)){
      t = ppt2;
    }else if(str.match(/\.xls|\.xlsx/i)){
      t = excel2;
    }else if(str.match(/\.pdf/i)){
      t = pdf2;
    }

    var index = [];
    for(var i=0; i<fileList.length; i++){
      if(fileList[i].uid == uidTmp){
        fileList[i].url = file.response.fileUrl;
        fileList[i].thumbUrl = t||file.url;
      }
      if( (fileList[i].name === file.name) && (fileList[i].size === file.size) && (fileList[i].lastModified === file.lastModified) ){
        index.push(i);
      }
    }
    if(index.length>1 && fileList.length>1){
      fileList.splice(index[index.length-1], 1);
      openNotice('error', '上传错误', `不能重复上传`);
    }

    this.setState({fileList});
    this.props.getList(fileList, this.props.index||null, this.props.fileBelong||null);
  },//上传成功的回调方法

  getThumbUrl(list){
    for(let i=0; i<list.length; i++){
      let str = list[i].name;
      let t = '';

      if(str.match(/\.doc|\.docx/i)){
        t = word2;
      }else if(str.match(/\.ppt|\.pptx/i)){
        t = ppt2;
      }else if(str.match(/\.xls|\.xlsx/i)){
        t = excel2;
      }else if(str.match(/\.pdf/i)){
        t = pdf2;
      }

      list[i].thumbUrl = t||list[i].url;
    }
    return list;
  },//设置缩略图

  render(){
    const self = this;
    const {list} = this.state;
    const {accept, labelText, countLimit, defaultList} = this.props;
    const btnGroupStyle = {
      width: '100%',
      backgroundColor: '#f7f7f7',
    };
    const uploadProps = {
      action: `${config.server}/upload`,
      listType: 'picture',
      showUploadList: true,
      // defaultFileList: defaultList,
      beforeUpload: (file, fileList) => {
        if ( accept && (accept.length>0)) {
          var reg = new RegExp(accept);
          if(!reg.test(file.name)){
            openNotice('error', '上传错误', `仅支持 ${accept} 格式`);
            return false;
          }
        }
      },//限制上传
      onChange: (param) => {
        console.log(param);
        let file = param.file;
        let fileList = param.fileList;

        if (file.status === 'done') {
          console.log('done: 上传完成，成功与否自行判断');
          self.onUploadDone(file, fileList);
        } else if (file.status === 'removed') {
          console.log('removed: 删除, 将删除结果同步到modal组件的state中');
          self.onDeleteDone(file, fileList)
        } else if (file.status === 'uploading') {
          console.log('uploading: 上传中');
        } else if (file.status === 'error') {
          console.log('error: 上传失败');//上传失败
        }
      }
    };

    return (
      <div style={{position: 'relative', marginBottom:'24px'}}>
        <div style={btnGroupStyle}>
          <Dragger {...uploadProps}>
            <br />
            <p className="ant-upload-text" style={{textAlign: 'left', paddingLeft: '10px'}}>
              <Button size="large" type="primary">{labelText||'附件上传'}</Button>
              <span style={{color: '#aaaaaa', marginLeft: '20px'}}>
                可拖拽文件到此区域上传
                {countLimit ? <span>，仅限上传 <span style={{color: 'red'}}>{countLimit}</span> 份</span> : ''}
                {accept ? <span>，仅支持 <span style={{color: 'red'}}>{accept}</span> 格式</span>: ''}
              </span>
            </p>
            <br />
          </Dragger>
        </div>
      </div>
    )
  }
});


FileUpload.propTypes = {
  defaultList: PropTypes.array,
  countLimit: PropTypes.number,
  labelText: PropTypes.string,
  accept: PropTypes.string,
  index: PropTypes.string,
  fileBelong: PropTypes.string,
}

export default FileUpload
